<div class="lv-select-main" #selectMain>
  <!-- 展示区 -->
  <div class="lv-select-value">
    <!-- placeholder -->
    <div *ngIf="empty" class="lv-select-placeholder" lv-overflow>{{ lvPlaceholder }}</div>

    <!-- 有选中值时 -->
    <ng-container [ngSwitch]="!!customTrigger">
      <!-- 默认选中样式 -->
      <div
        [class]="{ 'lv-select-trigger-default': true, 'lv-select-trigger-wrap': multiple && (isShowLess || lvMaxTagCount >= 0) }"
        *ngSwitchDefault
        [ngStyle]="{ maxHeight: getTriggerMaxHeight() }"
      >
        <ng-container *ngTemplateOutlet="multiple ? triggerMultiItemTpl : triggerItemTpl; context: { $implicit: value }"></ng-container>
      </div>

      <!-- 自定义选中样式 -->
      <ng-container *ngSwitchCase="true">
        <ng-container *ngTemplateOutlet="customTrigger"></ng-container>
      </ng-container>
    </ng-container>
  </div>
</div>

<lv-help-tooltip></lv-help-tooltip>

<!-- 删除icon -->
<div *ngIf="!lvLoading" [ngClass]="{ 'lv-select-clear': true, show: lvShowClear && !empty && !lvDisabled }">
  <div class="lv-select-clear-container">
    <i lv-icon="lv-icon-clear" lvColorState (click)="clearSelected($event)"></i>
  </div>
</div>

<!-- 下展icon -->
<div class="lv-select-operation" *ngIf="!lvLoading">
  <lv-select-trigger-icon [lvOpen]="selectOpen"></lv-select-trigger-icon>
</div>

<div class="lv-select-loading" *ngIf="lvLoading">
  <img src="{{ assetsPrefixPath }}assets/webp/gray.png" alt="icon-loading" class="lv-icon-loading" />
</div>

<!-- 展示区 （多选）template -->
<ng-template #triggerMultiItemTpl let-data>
  <ng-container
    *ngTemplateOutlet="triggerMultiItemTagTpl; context: { $implicit: data?.slice?.(0, isShowLess ? data?.length : maxTagCount) }"
  ></ng-container>

  <!--仅用于宽度计算，不显示，根据浏览器宽度估算一行不会超过40个，故设置40个上限-->
  <div class="lv-trigger-item-calc-container" #selectTriggerCalc>
    <ng-container *ngTemplateOutlet="triggerMultiItemTagTpl; context: { $implicit: data?.slice?.(0, 40) }"></ng-container>
  </div>
  <ng-container *ngIf="data?.length - maxTagCount > 0">
    <span *ngIf="!isShowLess" class="lv-trigger-more-text" (click)="toggleShowLess($event)">+{{ data?.length - maxTagCount }}</span>
    <span *ngIf="isShowLess" class="lv-trigger-less-text" (click)="toggleShowLess($event)">
      {{ 'showLess' | i18n }}
    </span>
  </ng-container>
</ng-template>

<ng-template #triggerMultiItemTagTpl let-data>
  <ng-container *ngFor="let item of data">
    <div
      class="lv-trigger-item"
      #triggerItem
      [class.disabled]="item?.disabled"
      [ngClass]="{
        'lv-row-model': lvMaxTagCount === INFINITY
      }"
    >
      <span class="lv-trigger-text" [ngClass]="{ 'lv-only-safari': isSafari }" lv-overflow>{{ item?.label }}</span>
      <i lv-icon="lv-icon-clear" *ngIf="!item?.disabled && !lvDisabled" (click)="removeSelectedItem($event, item)"></i>
    </div>
  </ng-container>
</ng-template>

<!-- 展示区 （单选）template -->
<ng-template #triggerItemTpl let-data>
  <div class="lv-trigger" lv-overflow>{{ data?.label }}</div>
</ng-template>
